<template>
  <div>
    <div class="item">
      <div class="portrait">
        <img :src="info.coach.coach_cover" alt="" />
      </div>
      <ul class="info">
        <li class="name">
          <span>{{info.coach.coach_name}}</span>
          <img v-show="true" src="@/assets/icon_baoming/diamond.png" alt="" />
        </li>
        <li class="score">
          <van-rate
            size="12px"
            color="#fd7e14"
            v-model="info.coach.coach_score"
            readonly
            allow-half
          />
          <span>{{info.coach.coach_score}}分</span>
        </li>
        <li class="Belong">
          <div class="left">
            <span>驾考:{{info.coach.licensetype}}</span>
            <span>{{info.coach.schoolname}}</span>
          </div>
          <div class="right">
            <span>{{info.coach.city_name}}</span>

          </div>
        </li>
        <li class="tag">
          <div v-for="(item,index) in labelArray" :key="index">{{ item }}</div>

        </li>
        <!-- <li class="discounts">
          <div v-show="true">
            <i class="iconfont icon-jian"></i>
            <span>学车立减{{}}</span>
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const info=defineProps({
  coach: {
    coach_id: Number, //id
    coach_name: String, //教练名字
    coach_phone: String, //教练电话
    coach_score: Number, //教练评分
    coach_cover: String, //教练照片
    licensetype: String, //教学  驾考类型
    schoolname: String, //所属驾校
    coachlabel: String, //教练标签
    city_name:String,
  },
});
/* 教练标签  字符串转为数组 */
let labelArray=reactive([])
labelArray=info.coach.coachlabel.split('/')
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  padding: 10px;

  /* 头像部分 */
  > .portrait {
    width: 90px;
    display: flex;
    justify-content: center;

    > img {
      margin-top: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }

  > .info {
    flex: 1;

    /* 教练名字 */
    > .name {
      display: flex;
      margin-bottom: 10px;
      /* 名字字体 */
      > span {
        display: block;
        margin-right: 8px;
        font-size: 18px;
        color: black;
        font-weight: bold;
      }
      /* 钻石图标 */
      > img {
        width: 22px;
        object-fit: cover;
      }
    }

    /* 评分部分 */
    .score {
      margin-bottom: 10px;
      > span {
        margin-left: 0.5em;
        color: #fd7e14;
        font-size: 14px;
      }
    }

    /* 所属驾校 及市区距离 */
    > .Belong {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--font-color-gary);
      margin-bottom: 8px;
      line-height: 30px;
      > .left {
        display: flex;
        > span:nth-child(1) {
          margin-right: 1em;
        }
      }
      > .right {
        display: flex;

        > span:nth-child(1) {
          margin-right: 1em;
        }
      }
    }

    //教练标签
    > .tag {
      display: flex;
      margin-bottom: 10px;
      > div {
        line-height: 20px;
        background-color: var(--color-blue-200);
        border-radius: 3px;
        font-size: 12px;
        color: var(--color-blue-500);
        padding: 0 3px;
        margin-right: 1em;
      }
    }

    /* 优惠活动 */
    > .discounts {
      > div {
        line-height: 24px;
        > i {
          color: blueviolet;
          font-size: 20px;
          vertical-align: bottom;
          margin-right: 0.3em;
        }
        > span {
          font-size: 14px;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>
